<template>
  <!-- 定义表单组件，使用 Element Plus 的 el-form 组件 -->
  <el-form
    ref="ruleFormRef"
    :model="formData"
    style="max-width: 600px"
    status-icon
    label-width=""
    class="reg-form"
  >
    <!-- 循环渲染表单项，根据 fields 数组动态生成 -->
    <el-form-item
      v-for="(field, index) in fields"
      :key="index"
      :prop="field.prop"
    >
      <!-- 输入框组件，绑定表单数据，根据 field 配置动态设置属性 -->
      <el-input
        v-model="formData[field.prop]"
        :placeholder="field.placeholder"
        size="large"
        :type="field.type || 'text'"
        :style="{ height: '44px', marginBottom: '6px' }"
        :prefix-icon="field.icon"
        :show-password="field.showPassword"
      />
      <!-- 如果 field 配置了 getCode 属性，则显示获取验证码按钮 -->
      <span v-if="field.getCode" class="get-code">
        <!-- 按钮组件，根据 isCountingDown 状态禁用按钮，点击触发 handleClick 方法 -->
        <button
          type="button"
          class="get-code-btn"
          :disabled="isCountingDown"
          @click="handleClick"
        >
          {{ buttonText }}
        </button>
      </span>
    </el-form-item  style="width: 100%">
    <!-- 提交按钮所在的表单项 -->
    <el-form-item style="margin-bottom: 45px">
      <!-- 点击触发 handleSubmit 方法，显示注册或登录文本 -->

      <el-button
        @click="handleSubmit"
        class="reg-btn"
        :loading="props.loading"
          :disabled="isSubmitDisabled || props.submitDisabled"
          type="primary"
          size="large"
          style=""
      >
        {{ regOrLog }}{{ flagNum }}
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
// 从 Element Plus 图标库导入所需图标类型
import {
  type Cellphone,
  type Iphone,
  type PhoneFilled,
  type User
} from '@element-plus/icons-vue'
// 从 Vue 导入响应式 API 和生命周期钩子
import { ref, watch } from 'vue'
// 从 Element Plus 导入表单实例类型
import type { FormInstance } from 'element-plus'
// 从 Element Plus 导入表单相关组件
import { ElForm, ElFormItem, ElInput } from 'element-plus'
// 从 Vue 导入定义 emit 和 props 的函数
import { defineEmits, defineProps } from 'vue'
// 从 Element Plus 导入消息提示组件
import { ElMessage } from 'element-plus'
import { sendSms } from '@/api/sms'

// 标记是否正在倒计时，用于禁用按钮
const isCountingDown = ref(false)
// 倒计时的秒数
const countdownSeconds = ref(60)
// 按钮上显示的文本
const buttonText = ref('获取验证码')
// 控制提交按钮的禁用状态
const isSubmitDisabled = ref(true)


/**
 * 根据路径获取注册或登录的文本
 * @param path - 当前页面的路径
 * @returns 对应的文本，可能是 '注册'、'登录' 或 '未知操作'
 */
const getRegOrLogText = (path: string): string => {
  if (path === '/register') {
    return '注册'
  } else if (path === '/login') {
    return '登录'
  }
  return '未知操作'
}

// 定义表单字段的类型
interface Field {
  prop: string // 表单字段的属性名
  placeholder?: string // 输入框的占位文本
  type?: string // 输入框的类型
  icon:
    | string
    | typeof User
    | typeof Iphone
    | typeof Cellphone
    | typeof PhoneFilled // 输入框的前缀图标
  showPassword?: boolean // 是否显示密码可见切换按钮
  getCode?: () => void // 是否显示获取验证码按钮
}

// 定义表单数据的类型
interface FormData {
  [key: string]: any // 允许任意键值对
}

// 定义组件的 props 类型
const props = defineProps<{
  formData: FormData // 表单数据
  fields: Field[] // 表单字段配置数组
  path: string // 当前页面的路径
  flagNum: number // 标识数字
  loading: boolean
  submitDisabled?: boolean // 来自父组件的提交按钮禁用控制
}>()

// 根据路径初始化注册或登录的文本
let regOrLog = ref<string>(getRegOrLogText(props.path))

// 定义表单实例的引用
const ruleFormRef = ref<FormInstance | null>(null)

// 定义组件触发的事件
// const emit = defineEmits<{
//   (e: 'update:modelValue', modelValue: boolean): void
//   (e: 'submit', formData: FormData): void // 提交表单时触发的事件
// }>()

const emit = defineEmits<{
  (e: 'submit', formData: FormData): void // 提交表单时触发的事件
  (e: 'update:modelValue', modelValue: boolean): void
}>()


// 监听表单数据变化，实时校验
watch(() => props.formData, async (newValue) => {
  if (props.submitDisabled) return // 如果父组件禁用了按钮，则不进行实时校验更新

  if (!ruleFormRef.value) return
        console.log(Object.keys(newValue),'监听表单数据变化，实时校验')
  try {

    // 对所有字段进行校验
    await ruleFormRef.value.validateField(Object.keys(newValue))
  
    // 所有字段校验通过
    isSubmitDisabled.value = false
  } catch (error) {
    // 有字段校验失败
    isSubmitDisabled.value = true
  }
}, { deep: true })


/**
 * 处理获取验证码按钮的点击事件
 * 该方法会对表单中的手机号字段进行单独校验，
 * 若校验通过则开始倒计时并可触发验证码发送逻辑，
 * 若校验失败则给出错误提示。
 */
const handleClick = async () => {
  // 检查表单引用是否存在，若不存在则直接返回
  if (!ruleFormRef.value) return

  try {
    // 单独校验表单的 phone 字段
    await ruleFormRef.value.validateField('phone')
    console.log('手机号校验通过')
    // 开始倒计时
    startCountdown()
    // 这里可以添加实际发送验证码的逻辑，例如调用 API 接口
    try {
      const res = await sendSms({ phoneNumbers: props.formData.phone })
      if (res?.code === 0) {
        ElMessage.success('发送验证码成功')
      } else {
        ElMessage.error('发送验证码失败，请稍后再试')
      }
    } catch (error: any) {
      ElMessage.error(error.message)
    }
  } catch (error) {
    // 显示错误提示信息
    ElMessage.error('手机号校验失败，请检查输入')
    return
  }
}

/**
 * 开始倒计时
 * 禁用获取验证码按钮，更新按钮文本，每秒更新倒计时
 * 倒计时结束后重置按钮状态
 */
const startCountdown = () => {
  console.log('开始倒计时')
  let seconds = countdownSeconds.value
  // 禁用按钮
  isCountingDown.value = true

  // 每秒更新一次倒计时
  const interval = setInterval(() => {
    seconds--
    // 更新按钮文本
    buttonText.value = `${seconds}秒后重新获取`

    // 当倒计时结束，清理定时器并重置状态
    if (seconds <= 0) {
      clearInterval(interval)
      // 启用按钮
      isCountingDown.value = false
      // 重置按钮文本
      buttonText.value = '获取验证码'
    }
  }, 1000)
}

/**
 * 处理表单提交事件
 * 对整个表单进行校验，若校验通过则触发 submit 事件
 * 若校验失败则给出错误提示
 */
const handleSubmit = async () => {
  
  // 检查表单引用是否存在，若不存在则直接返回
  if (!ruleFormRef.value) return
  // 对整个表单进行校验
  await ruleFormRef.value.validate((valid: boolean, fields: any) => {
    if (valid) {
        console.log('表单校验成功')
        // 表单校验通过，启用提交按钮
        // 表单校验通过，保持按钮启用状态
        isSubmitDisabled.value = false
        // 触发 submit 事件，传递表单数据
        let submitData = {}
        console.log(props.flagNum) // 打印 props 的值，用于调试

      // 根据 props.flagNum 判断提交的数据
      if (props.flagNum === 1) {
        // 假设 phoneFields 对应 flagNum 为 1
        submitData = {
          phone: props.formData.phone,
          verificationCode: props.formData.verificationCode
        }
      } else if (props.flagNum === 2) {
        // 假设 accountFields 对应 flagNum 为 2
        submitData = {
          accountName: props.formData.accountName,
          phone: props.formData.phone,
          password: props.formData.password,
          verificationCode: props.formData.verificationCode
        }
      } else {
        submitData = props.formData
      }

      // 触发 submit 事件，传递过滤后的数据
      emit('submit', submitData)

      //  emit('submit', props.formData)
    } else {
        // 校验失败，保持按钮禁用状态
        isSubmitDisabled.value = true
        // 显示错误提示信息
        ElMessage.error('表单校验失败，请检查输入')
        console.log('表单校验失败', fields)
      }
  })
}
</script>

<style scoped>
/* 表单样式 */
.reg-form {
  width: 100%;
  padding-top: 4px;
  position: relative;
}

/* 输入框图标样式 */
.reg-form :deep(.el-input__icon) {
  color: #4e5969;
  font-size: 18px;
}

/* 提交按钮样式 */
.reg-form .reg-btn {
  background: #dd3a5f;
  width: 100%;
  border-radius: 2px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  padding: 0 12px;
  text-align: center;
  border: none
}

/* 禁用状态的按钮样式 */
.reg-form .reg-btn:disabled {
  background: #dd3a5f;
  color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 重置按钮样式 */
.reg-form .reset-btn {
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  color: #606266;
  cursor: pointer;
  font-size: 12px;
  line-height: 26px;
  padding: 0 12px;
  text-align: center;
  margin-left: 12px;
  border: 1px solid #dcdfe6;
}

/* 获取验证码按钮样式 */
.reg-form .get-code {
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  position: absolute;
  right: 2px;
  top: 6px;
}
.get-code-btn {
  padding: 8px 10px;
  background-color: white;
  color: #007bff;
  border: none;
  cursor: pointer;
}
/* 禁用状态下的按钮样式 */
.get-code-btn[disabled] {
  background-color: #f0f0f0; /* 灰色背景 */
  color: #ccc; /* 灰色文本 */
  cursor: not-allowed; /* 禁用光标 */
}
</style>
